<template>
  <div>
    <v-chart :forceFit="true" :height="height" :data="data" :padding="[20, 40, 100, 40]" :style="style">
      <v-tooltip />
      <v-axis dataKey="branch" :label="label"></v-axis>
      <v-axis dataKey="count" :label="label"></v-axis>
      <v-legend :textStyle="textStyle" />
      <v-stack-bar position="branch*count" :textStyle="textStyle" :color="color" />
    </v-chart>
  </div>
</template>

<script>
import DataSet from '@antv/data-set';

export default {
  name: 'StackBar',

  props: {
    sourceData: {
      type: Array,
      default: () => [],
    },
    height: {
      type: Number,
      default: 400,
    },
  },

  data() {
    return {
      data: [],
      textStyle: {
        fill: '#fff',
        fontSize: 12,
      },
      label: {
        autoRotate: true,
        textStyle: {
          fill: '#fff',
          fontSize: 12,
        },
      },
      style: {
        fill: '#fff',
        fontSize: 16,
      },
      color: [
        'type',
        function(val) {
          if (val === '未整改') return '#ff4d4f';
          return '#13c2c2';
        },
      ],
    };
  },

  created() {
    // console.log('整改柱状图数据--------------', this.sourceData);
    // this.handleData(this.sourceData);
    this.data = this.sourceData;
  },

  updated() {
    this.data = this.sourceData;
  },

  methods: {
    handleData(sourceData) {
      const dv = new DataSet.View().source(sourceData);
      dv.transform({
        type: 'fold',
        fields: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.'],
        key: '月份',
        value: '月均降雨量',
      });
      console.log(dv);
      this.data = dv.rows;
    },
  },
};
</script>
